//
//  MenuView.swift
//  SwiftUIDemo
//
//  Created by 陈旺 on 2022/2/11.
//

import SwiftUI

struct MenuView: View {
    
    @State var showMenu = false
    
    @State var showProfile = false
    
    var body: some View {
        ZStack {
            
            ListView()
                .blur(radius: showMenu ? 10 : 0)
                .scaleEffect(showProfile ? 0.9 : 1)
                .animation(.default, value: showProfile)
                .animation(.default, value: showMenu)
            
            ContentView()
                .background(.white)
                .cornerRadius(20)
                .shadow(radius: 10)
                .offset(y: showProfile ? 70 : UIScreen.main.bounds.size.height)
                .animation(.spring(), value: showProfile)
            
            VStack(alignment: .leading) {
                HStack {
                    Button(action: {
                        self.showMenu.toggle()
                    }, label: {
                        HStack {
                            Spacer()
                            Image(systemName: "list.dash")
                                .foregroundColor(.black)
                        }
                        .padding(.trailing, 20)
                        .frame(width: 90, height: 60)
                        .background(.white)
                        .cornerRadius(30)
                        .shadow(radius: 10, x: 0, y: 10)
                        .offset(x: -20)
                    })
                    
                    Spacer()
                    
                    Button(action: {
                        self.showProfile.toggle()
                    }, label: {
                        Image(systemName: "person.circle")
                            .frame(width: 30, height: 30)
                            .foregroundColor(.black)
                            .background(.white)
                            .cornerRadius(15)
                            .shadow(radius: 10)
                    })
                }
                .offset(y: showProfile ? 0 : 40)
                .animation(.spring(), value: showProfile)
                Spacer()
            }
            
            MenuViewSheet(showMenu: $showMenu)
        }
    }
}

struct MenuView_Previews: PreviewProvider {
    static var previews: some View {
        MenuView()
            .previewDevice("iPhone 11")
    }
}

struct MenuRow: View {
    var image = "creditcard"
    var text = "My Account"
    var body: some View {
        HStack {
            Image(systemName: image)
                .imageScale(.large)
                .frame(width: 32, height: 32)
            Text(text)
                .font(.headline)
            Spacer()
        }
    }
}

struct MenuModel: Identifiable {
    var id = UUID()
    var title: String
    var icon: String
}
let menuData = [
    MenuModel(title: "My Account", icon: "person.crop.circle"),
    MenuModel(title: "Billing", icon: "creditcard"),
    MenuModel(title: "Team", icon: "person.and.person"),
    MenuModel(title: "Sign Out", icon: "arrow.uturn.down"),
]

struct MenuViewSheet: View {
    
    @Binding var showMenu: Bool
    
    var body: some View {
        VStack(alignment: .leading, spacing: 20) {
            ForEach(menuData) { item in
                MenuRow(image: item.icon, text: item.title)
            }
            Spacer()
        }
        .padding(30)
        .frame(minWidth: 0, maxWidth: .infinity)
        .background(Color.white)
        .cornerRadius(30)
        .padding(.trailing, 60)
        .shadow(radius: 20)
        .rotation3DEffect(Angle(degrees: showMenu ? 0 : 60), axis: (x: 0, y: 10, z: 0))
        .offset(x: showMenu ? 0 : -UIScreen.main.bounds.size.width)
        .animation(.spring(), value: showMenu)
        .onTapGesture {
            self.showMenu.toggle()
        }
    }
}
